<template>
    <div class="achieveBasicInfo container">
        <div id="components-form-demo-advanced-search">
            <div class="tabCommonTitle">
                <span>成果联系人</span>
                <b>红色星号为必填项</b>
            </div>
            <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
            >
                <a-form-model-item ref="name" label="姓名：" prop="name">
                    <a-input v-model="form.name" @blur="() => {$refs.name.onFieldBlur();}"/>
                </a-form-model-item>
                <a-form-model-item ref="department" label="部门：" prop="department">
                    <a-input v-model="form.department" @blur="() => {$refs.department.onFieldBlur();}"/>
                </a-form-model-item>
                <!-- <a-form-model-item ref="post" label="职务：" prop="post">
                    <a-input v-model="form.post" @blur="() => {$refs.post.onFieldBlur();}"/>
                </a-form-model-item> -->
                <a-form-model-item ref="tel" label="手机号：" prop="tel">
                    <a-input v-model="form.tel" @blur="() => {$refs.tel.onFieldBlur();}"/>
                </a-form-model-item>
                <a-form-model-item class="imgCodeBox" ref="update_tel_gapcode" label="图片验证码：" prop="update_tel_gapcode">
                    <a-input v-model="form.update_tel_gapcode" @blur="() => {$refs.update_tel_gapcode.onFieldBlur();}"/>
                    <div class="imgCode" style="position:absolute;right:4px;top:-10px;">
                        <span class="pointer" @click="getrandomImage">
                            <img :src="imgcodeUrl"/>
                        </span>
                    </div>
                </a-form-model-item>
                <a-form-model-item class="vercode" ref="verCode" label="短信验证码：" prop="verCode">
                    <a-input v-model="form.verCode" @blur="() => {$refs.vercode.onFieldBlur();}"/>
                    <div class="cont_li_input vercode">
                        <span class="pointer getCodeBtn" id="getCodeBtn_update_tel" @click="getCode3">获取短信验证码</span>
                        <span class="downtimecount" id="downtimecount_update_tel" style="display: none;"></span>
                    </div>
                </a-form-model-item>
                <a-form-model-item ref="mailbox" label=" 邮箱：" prop="mailbox">
                    <a-input v-model="form.mailbox" @blur="() => {$refs.mailbox.onFieldBlur();}"/>
                </a-form-model-item>
                <a-form-model-item ref="fixedTel" label="固定电话：">
                    <a-input v-model="form.fixedTel"/>
                </a-form-model-item>
                <a-form-model-item ref="fax" label=" 传真：">
                    <a-input v-model="form.fax"/>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button type="primary" class="save_info_btn" @click="onSubmit" :class="is_modify=='Y'?'':'disabled'" :disabled="is_modify=='Y'?false:true">保存</a-button>
                </a-form-model-item>
            </a-form-model>
        </div>
    </div>
</template>
<script>
import {
    cxjsb_LxrAdd,
    cxjsb_getLxr,
    cxjsb_getYzm,
    randomImage 
} from '@/api/shenbao';
var timer3, curCount3 = 60;
function setCountDown3() {
    if (curCount3 === 0) {
		curCount3 = 60;
        window.clearInterval(timer3);
        document.getElementById('getCodeBtn_update_tel').style.display="block";
        document.getElementById('downtimecount_update_tel').style.display="none";
    } else {
        curCount3--;
        document.getElementById('downtimecount_update_tel').style.display="block";
        document.getElementById('getCodeBtn_update_tel').style.display="none";
        document.getElementById('downtimecount_update_tel').innerHTML = "请在"+curCount3+"秒内输入验证码";
    }
}
import { mapActions } from 'vuex'
export default {
    name: 'ContactPeople',
    data() {
        return {
            labelCol: { span: 2 },
            wrapperCol: { span: 7 },
            other: '',
            imgcodeUrl: "",
            form: {
                // 姓名
                name: '',
                // 部门
                department: '',
                // 职务
                // post: '',
                // 手机号
                tel: '',
                // 验证码
                verCode: "",
                // 邮箱
                mailbox: '',
                // 固定电话
                fixedTel: '',
                // 传真
                fax: '',
                // 图文码
                update_tel_gapcode: ""
            },
            rules: {
                name: [
                    { required: true, message: '请填写姓名', trigger: 'blur' }
                ],
                department:[
                    { required: true, message: '请填写部门', trigger: 'blur' }
                ],
                // post:[
                //     { required: true, message: '请填写职务', trigger: 'blur' }
                // ],
                tel:[
                    { required: true, message: '请填写手机号', trigger: 'blur' }
                ],
                update_tel_gapcode:[
                    { required: true, message: '请填写图片验证码', trigger: 'blur' }
                ],
                verCode: [
                    {required: true, message: '请填写验证码', trigger: 'blur' }
                ],
                mailbox:[
                    { required: true, message: '请填写邮箱', trigger: 'blur' }
                ]
            },
            reg: /^1[3456789]\d{9}$/,
            yxreg: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
            lxrdata: {},
            key: ""
        }
    },
    props: ['is_modify'],
    methods: {
        ...mapActions('fillingSteps', ['getStatus']),
        // 用户登录获取验证码key值
        getrandomImage() {
            let that = this;
            this.key = new Date().getTime();
            randomImage(that.key).then(res=>{
                that.imgcodeUrl = res.data.result;
            })
        },
        // 获取短信验证码
        getCode3() {
            let that = this;
            if (!this.reg.test(this.form.tel)) {
                that.$message.warning('手机号格式不正确');
                return;
            };
            
            if(!this.form.update_tel_gapcode) {
                that.$message.warning('请输入图片验证码');
                return
            }
            // timer3 = window.setInterval(setCountDown3, 1000);
            console.log('key==',that.key)
            console.log('tel==',that.form.tel)
            cxjsb_getYzm({
                code: that.form.update_tel_gapcode,
                key: that.key,
                phoneNumber: that.form.tel,
                type: 6
            }).then(res=>{
                if (res.data.code=='200') {
                    that.$message.success('发送成功');
                    timer3 = window.setInterval(setCountDown3, 1000);
                } else {
                    that.getrandomImage();
                    that.$message.error(res.data.message);
                }
            })  
        },
        onSubmit() {
            let that = this;
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    if (!this.reg.test(this.form.tel)) {
                        that.$message.warning('手机号格式不正确');
                        return
                    }
                    if (!this.yxreg.test(this.form.mailbox)) {
                        that.$message.warning('邮箱格式不正确');
                        return
                    }
                    let formData = new FormData();
                    if (that.lxrdata.id) {
                        formData.append('id', that.lxrdata.id);
                    } else {
                        formData.append('id', '');
                    }
                    formData.append('cxj_cxj_id', that.cxj_cxj_id);
                    formData.append('lxr_xm', that.form.name);
                    formData.append('lxr_bm', that.form.department);
                    formData.append('lxr_sj', that.form.tel);
                    formData.append('lxr_zj', that.form.fixedTel);
                    formData.append('lxr_yx', that.form.mailbox);
                    formData.append('lxr_cz', that.form.fax);
                    formData.append('code', that.form.verCode);
                    cxjsb_LxrAdd(formData).then(res=>{
                        if (res.data.code=='200') {
                            that.getcxjsb_getLxr();
                            that.$message.success('保存成功');
                            that.getStatus(that.cxj_cxj_id)
                        } else {
                            that.$message.error(res.data.message);
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        getcxjsb_getLxr() {
            let that = this;
            cxjsb_getLxr({cxj_cxj_id: that.cxj_cxj_id}).then(res=>{
                if (res.data.code=='200') {
                    if (res.data.result && res.data.result.id) {
                        that.lxrdata = res.data.result;
                        that.form.name = that.lxrdata.lxrXm;
                        that.form.department = that.lxrdata.lxrBm;
                        that.form.tel = that.lxrdata.lxrSj;
                        that.form.mailbox = that.lxrdata.lxrYx;
                        that.form.fixedTel = that.lxrdata.lxrZj;
                        that.form.fax = that.lxrdata.lxrCz;
                    }
                } else {
                    that.$message.error(res.data.message);
                }
                console.log(res, 'res')
            })
        },
        resetForm() {
            this.$refs.ruleForm.resetFields();
        }
    },
    mounted() {
        this.getrandomImage();
        this.cxj_cxj_id = this.$route.query.cxj_cxj_id;
        this.getcxjsb_getLxr();
    },
}
</script>
<style lang='less'>
#components-form-demo-advanced-search .ant-form {
    max-width: none;
    margin-top: 24px;
}

.ant-form {
    // width: 570px;
    .ant-form-item {
        .ant-input, .ant-select-selection--single {
            height: 40px;
            border: 1px solid #ECEBEB;
        }
    }

}

</style>

<style lang="less" scoped>
.achieveBasicInfo {
    height: 687px;
    .subTn {
        text-align: center;
        margin-top: 40px;
    }
}
.save_info_btn {
    margin-top: 40px;
    margin-left: 107px;
    width: 250px;
    height: 60px;
    line-height: 60px;
    background: linear-gradient(90deg, #267FEA 0%, #519FF8 100%);
    border-radius: 4px;
    font-size: 22px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
}
.vercode {
    .ant-form-item-children {
        position: relative;
    }
}
.imgCodeBox {
    .ant-form-item-children {
        display: block!important;
        position: relative;
    }
}
.cont_li_input {
            margin-left: 10px;
            line-height: 1.5;
                    position: absolute;
                    right: 22px;
                    top:0px;
            // input {
            //     width: 434px;
            //     height: 50px;
            //     border-radius: 4px;
            //     border: 1px solid #ECEBEB;
            //     text-indent: 1em;
            // }
            // &.captcha {
            //     width: 434px;
            //     display: flex;
            //     justify-content: space-between;
            //     align-items: center;
            //     input {
            //         width: 293px;
            //     }
            //     span {
            //         width: 127px;
            //         height: 50px;
            //         text-align: center;
            //         line-height: 50px;
            //         img {
            //             width: 100%;
            //             height: 100%;
            //             display: block;
            //         }
            //     }
            // }
            &.vercode {
                span {
                    font-size: 15px;
                    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                    font-weight: 400;
                    color: #006DC0;
                    &.downtimecount {
                        color: #999;
                    }
                }
            }
        }
</style>
